<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<!--<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">-->

		<title>课堂</title>

		<link rel="stylesheet" href="../css/base.css" />
		<link rel="stylesheet" href="../css/mui.min.css">
		
		
	</head>

	<body>
		<style>
			.mui-control-content {
				background-color: white;
				min-height: 215px;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
			    background-color: #00D4C5;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
				color: #00D4C5;
			}
			
			.mui-segmented-control{
				font-size: 20px;
			}
		</style>

		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					
					<a class="mui-control-item mui-active"  href="classroom-2.html">
						课堂
					</a>
					<a class="mui-control-item "  href="classroom-3.html">
						回课
					</a>
					
					
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6" ></div>
				
			</div>

		</div>
		
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script src="..js/local-keys.js"></script>
		<script src="../js/utils.js"></script>
		<script>
			mui.init({
				swipeBack: false
			});
			var subpages = ['classroom-2.html', 'classroom-3.html'];
			var subpage_style = {
				top:"40px",
				bottom: '0px'
			};
			var aniShow = {};
			 //创建子页面，首个选项卡页面显示，其它均隐藏；
			mui.plusReady(function() {
				
				// 隐藏滚动条
				plus.webview.currentWebview().setStyle({
					scrollIndicator: 'none'
				});
				var self = plus.webview.currentWebview();
				for (var i = 0; i < subpages.length; i++) {
					var temp = {};
					var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
					if (i > 0) {
						sub.hide();
					}else{
						temp[subpages[i]] = "true";
						mui.extend(aniShow,temp);
					}
					self.append(sub);
				}
				// 子页面滑动切换事件
                window.addEventListener("swipe_event", function(event) {
                    // 获取方向以及索引
                    var direction = event.detail.direction;
                    activeIndex = event.detail.index;
                    if(direction == "left") {
                       switchpage("classroom-3.html");
                    } else {
                      switchpage("classroom-2.html");
                    }
                    
                });
			});
			function switchpage(targetTab){
					//显示目标选项卡
				//若为iOS平台或非首次显示，则直接显示
				if(aniShow[targetTab]){
					plus.webview.show(targetTab);
				}else{
					//否则，使用fade-in动画，且保存变量
					var temp = {};
					temp[targetTab] = "true";
					mui.extend(aniShow,temp);
					plus.webview.show(targetTab,"fade-in",300);
				}
				//隐藏当前;
				plus.webview.hide(activeTab);
				//更改当前活跃的选项卡
				activeTab = targetTab;
				if(activeTab==subpages[0]){
					
					document.getElementById("sliderProgressBar").style.marginLeft="0px";
				}else{
					
					document.getElementById("sliderProgressBar").style.marginLeft="50%";
				}
				}
			 //当前激活选项
			var activeTab = subpages[0];
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
				 
				mui("#slider").on('tap', 'a', function(e) {
					var targetTab = this.getAttribute('href');
					if (targetTab == activeTab) {
						return;
					}
				switchpage(targetTab);
				});
				
				/*//加载初始化界面，来回刷新不会执行第二次
				mui("#item1mobile").load('classroom-2.html',function(){
					//mui('#item2mobile .mui-slider').slider();//手动初始化a元素内动态添加的轮播
				    printLog("2222222")
				});
				
				//var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
				//var html2 = "classroom-2.html";
				var item2 = document.getElementById('item2mobile');
				
				document.getElementById('slider').addEventListener('slide', function(e) {
					if(e.detail.slideNumber === 1) {
						if(item2.querySelector('.mui-loading')) {
							setTimeout(function() {
								//显示第二个布局的内容
								//item2.querySelector('.mui-scroll').innerHTML = html2;
							    
							    //可以将页面填充进这里
							 //   mui('#item2mobile').load('classroom-2.html');
							 //  只会执行一次
							   mui("#item2mobile").load('classroom-3.html',function(){
									//mui('#item2mobile .mui-slider').slider();//手动初始化a元素内动态添加的轮播
								    printLog("3333333333")
							    });
//							    mui.openWindow({
//								    url:'classroom-2.html',
//								});
							    
							}, 500);
						}
					} 
				});
				*/
			})(mui);
		</script>

	</body>

</html>